<template>
  <div>
    <div class="home" v-if="!this.homeLoading">
      <div class="leftContent">
        <div class="laborPerson">
          <laborPerson />
        </div>
        <div class="wagePay">
          <wagePay />
        </div>
      </div>
      <div class="rightContent">
        <div class="entryExitNews">
          <attendance />
        </div>
        <div class="attendance">
          <entryExitNews />
        </div>
        <div class="tellCheck">
          <tellCheck />
        </div>
      </div>
      <div style="position:relative;height:calc(100% - 15.7rem)">
        <div class="mapDiv">
          <homeMap></homeMap>
        </div>

        <div class="mapScollList">
          <mapScollList />
        </div>
      </div>
    </div>
    <dv-loading v-else style="width: 100%;
  height: calc(100vh - 13rem);color:#fff">Loading...</dv-loading>
  </div>
</template>

<script>
import laborPerson from './laborPerson/index'
import wagePay from './wagePay/index'
import attendance from './attendance/index'
import entryExitNews from './entryExitNews/index'
import tellCheck from './tellCheck/index'
import { mapGetters } from 'vuex'
import homeMap from './map/index'
import mapScollList from './map/mapScollList/index'
import { getHomePage } from '@/api/dataCenterHome'
export default {
  components: {
    laborPerson,
    homeMap,
    wagePay,
    attendance,
    entryExitNews,
    tellCheck,
    mapScollList
  },
  data() {
    return {
      laborPersonData: {},
      timer: null
    }
  },
  created() {
    this.$store.commit('setLoading', true)
    this.getHomeData()
    this.timer = setInterval(() => {
      this.getHomeData()
    }, 300000)
  },
  computed: {
    ...mapGetters(['homeLoading', 'userInfo'])
  },
  mounted() {
    // setTimeout(() => {
     
    // }, 2000)
    // console.log(this.homeLoading);
  },

  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    //获取首页统计数据
    getHomeData() {
      getHomePage({ projectId: sessionStorage.getItem('projectId') }).then((res) => {
        let resData = res.data.data.homePageLabourOrgVOList || []

        let pointData = []
        resData.forEach((item) => {
          item['option'] = '查看详情'
          switch (item.tenderCode) {
            case 'PGK-NT1':
              item['lat'] = '34.985971'
              item['lng'] = '118.787429'
              item['pointFlag'] = true
              pointData.push(item)
              break
            case 'JHK-SY2':
              item['lat'] = '34.261385'
              item['lng'] = '118.633883'
              item['pointFlag'] = true
              pointData.push(item)
              break
            case 'JHK-GY2':
              item['lat'] = '34.745779'
              item['lng'] = '119.4822'
              item['pointFlag'] = true
              pointData.push(item)
              break
            case 'JHK-SY1':
              item['lat'] = '34.461388'
              item['lng'] = '118.653888'
              item['pointFlag'] = true
              pointData.push(item)
              break
            case 'JHK-HA3':
              item['lat'] = '33.6567'
              item['lng'] = '119.122'
              item['pointFlag'] = true
              pointData.push(item)
              break
          }
        })
        res.data.data.homePageLabourOrgVOList=resData
         this.$store.commit('setLoading', false)
        //   console.log(pointData);
        // console.log( res.data.data);
        this.$store.commit('setPointData', pointData)
        this.$store.commit('setDataCenterHome', res.data.data)
      })
    }
  }
}
</script>

<style scoped>
.home {
  width: 100%;
  height: 100vh;
  position: relative;
}
.leftContent,
.rightContent {
  position: absolute;
  top: 0rem;
  height: calc(100% - 15.7rem);
  z-index: 99999;
  width: 20.4%;
}
.leftContent {
  left: 1.6rem;
}
.rightContent {
  right: 1.6rem;
}
.laborPerson,
.wagePay,
.entryExitNews,
.attendance,
.tellCheck {
  background: rgba(0, 246, 255, 0.05);
  width: 100%;
  height: 32%;
  border-radius: 0.5rem;
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
.entryExitNews,
.attendance,
.tellCheck {
  height: 32%;
  position: absolute;
  top: 0;
}
.attendance {
  top: 34%;
}
.tellCheck {
  top: 68%;
}
.laborPerson {
  height: 65.5%;
  position: absolute;
  top: 0;
  width: 100%;
}
.wagePay {
  height: 32.5%;
  position: absolute;
  top: 67.5%;
}
.mapScollList {
  width: 56%;
  height: 38%;

  background: rgba(0, 246, 255, 0.05);
  border-radius: 0.5rem;
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  position: absolute;
  top: 62%;
  left: 22%;
  z-index: 99999;
}
.mapDiv {
  width: 56%;
  height: 60%;
  position: absolute;
  top: 0;
  left: 22%;
  z-index: 99999;
}
</style>